<template>
  <div class="page" data-page="layer3dDetail" style="z-index: 2;">
    <div class="navbar">
      <div class="navbar-inner">
        <div class="left">
            <a href="#" class="link back" @click="$root.backToTab()">
              <i class="icon icon-back"></i>
              <span class="ios-only">Back</span>
            </a>
        </div>
        <!-- {{$route.params.layerId}} -->
        <!-- {{$route.params.orgId}} -->
        <div class="title sliding" style="left: -25px;">{{$route.params.layerName}}</div>
      </div>
    </div>
    <div class="page-content" id="layer3D_detail">
        <div class="block block-strong">
            <div id="layer3D_pic_content"> 
              <img src="" class="layer3D_pic"  alt="">
            </div>
            <div class="data-table data-table-init layer3D_table_container">
              <table>
                <thead>
                  <tr>
                    <th class="numeric-cell">序号</th>
                    <th class="numeric-cell">名称</th>
                    <th class="numeric-cell">状态</th>
                  </tr>
                </thead>
                <tbody id="mark_list_3d">
                  
                </tbody>
              </table>
            </div>
        </div>
    </div>
  </div>
</template>
<style scoped>
  #layer3D_detail{
    overflow: hidden;
  }   
  #layer3D_detail .block-strong{
    margin-top: 0px;
    padding: 0px;
    position: relative;
    width: 100%;
    height: 100%;
  }
  #layer3D_detail thead th{
    text-align: center;
    font-size: 12px;
    color: #666666;
  }
  #layer3D_detail tbody td{
    text-align: center;
    font-size: 14px;
    color: #666666;
  }
  #layer3D_pic_content{
    width: 100%;
    position: relative;
    height: 0;
    padding-bottom: 56.25%;
  }
  .layer3D_pic{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
  }
  .layer3D_table_container{
    position: fixed;
    bottom: 0;
    background-color: #fff;
    width: 100%;
  }
  .every-mark-tr-3d:active{
    background-color: rgba(221, 221, 221, 0.5);
  }
  
</style>
<script>
  return{
    mounted() {
    },
    data: function () {
     return {
     }
    },
    methods: {
      //获取打点数据
      getLayerData:function(){
        var self = this;
        Dao.getLayerDataFromAjax({},function(data){
          self.addpoints(data);
          self.addMarkList(data);
        });
      },
      addpoints:function(data) {
        var self = this;
        var $ = this.$;
        $("#mark_list_3d").empty();
        for (var i = 0; i < data.length; i++) {
            self.addMark(data[i]);
        }
      },
      addMark:function(data) {
        var container = document.getElementById('layer3D_pic_content');
        var defaultWidAndH = 20; //初始大小
        var defaultWidAndH_alert = 26;
        var currentWidAndh = defaultWidAndH*0.7;
        var currentWidAndh_alert = defaultWidAndH_alert*0.7;
        var imgOffset = 0 - currentWidAndh / 2 + "px"; //偏移量
        var imgOffset_alert = 0 - currentWidAndh_alert / 2 + "px";
        var x = data.xAxis;
        var y = data.yAxis;
        var makeName = data.markersName; //提示框标题
        var markimage = data.iconUrl; //图标url
        var markimage_alertBg = data.alarmIcon; //警情种类背景色，放在正常icon底部
        var pointid = data.id;
        //组合唯一id
        var img = document.createElement("img");
        $(img).attr({
            "src": markimage,
            "id": "mark_normal_"+pointid,
            "class": "markpic"
        }).css({
            "width": currentWidAndh + "px",
            "height": currentWidAndh + "px",
            "position": "absolute",
            "left": x + "%",
            "top": y + "%",
            "cursor": "pointer",
            "margin-top": imgOffset,
            "margin-left": imgOffset,
            "border-radius": currentWidAndh / 2
        });
        if (markimage_alertBg) {
            var img_alert = document.createElement("img");
            $(img_alert).attr({
                "src": markimage_alertBg,
                "id": "mark_alert_"+pointid,
                "class": "markpic"
            }).css({
                "width": currentWidAndh_alert + "px",
                "height": currentWidAndh_alert + "px",
                "position": "absolute",
                "left": x + "%",
                "top": y + "%",
                "cursor": "pointer",
                "margin-top": imgOffset_alert,
                "margin-left": imgOffset_alert,
                "border-radius": currentWidAndh_alert / 2
            });
            container.appendChild(img_alert);
        }
        container.appendChild(img);
      },
      addMarkList:function(data){
        var self = this;
        var $ = this.$;
        var app = this.$app;

        for(var i=0; i<data.length;i++){
          var fireType = "";
          if(data[i].fireTType==0){
            fireType = normalIcon;
          }
          else if(data[i].fireTType==10){
            fireType = alarmIcon;
          }
          else if(data[i].fireTType==20){
            fireType = faultIcon;
          }
          else if(data[i].fireTType==30){
            fireType = shellIcon;
          }
          jQuery("#mark_list_3d").append(` 
              <tr class="every-mark-tr-3d" id="`+data[i].id+`">
                <td class="numeric-cell">`+(i+1)+`</td>
                <td class="numeric-cell" id="mark_name_`+data[i].id+`" style="width: 50%;">`+data[i].markersName+`</td>
                <td class="numeric-cell">`+fireType+`</td>
              </tr>
          `);
        }
        jQuery(".every-mark-tr-3d").click(function(event) {

          var currentPointId = this.id;
          var currentPointName = $("#mark_name_"+currentPointId).html();
          app.methods.showToastCenter(currentPointName);
          if($("#mark_alert_"+currentPointId)){
              $("#mark_normal_"+currentPointId).addClass('rdspRotate');
              $("#mark_alert_"+currentPointId).addClass('rdspRotate');
          }else{
              $("#mark_normal_"+currentPointId).addClass('rdspRotate');
          }
          setTimeout(function(){
            $(".markpic").removeClass('rdspRotate');
          },1010);
        });
      }
    },
    on: {
      pageInit: function(e, page) {
        var self = this;
        jQuery("#layer3D_pic_content").each(function () {
            new RTP.PinchZoom(jQuery(this), {});
        });
      },
      pageAfterIn:function(e, page) {
        var self = this;
        var $ = this.$;

        var layerHeight = $(".layer3D_pic").height();
        var navHeight = $(".navbar-inner").height();
        var tableHeigth = screen.height - (layerHeight+navHeight)-20;
        $(".layer3D_table_container").css("height",tableHeigth+"px");
        self.getLayerData();
      }
    }
  }
</script>